<template>
  <div class="child-page1">
    <Header title="ChildPage1" go-back="true"></Header>
    <div class="container">
      <!--Anchor锚点-->
      <div class="goodShow">   <!--滚动区域-->
        <Anchor show-ink :affix="true" container=".goodShow">
          <AnchorLink href="#hz" title="杭州" />
          <AnchorLink href="#cq" title="重庆" />
          <AnchorLink href="#sh" title="上海" />
        </Anchor>
        <div id="hz" style="height:1px;"></div>
        <div id="cq" style="height:1px;"></div>
        <div id="sh" style="height:1px;"></div>
      </div>
      <!--步骤条-->
      <div class="steps">
        <p>当前正在进行第 {{ current + 1 }} 步</p>
        <Steps :current="current">
          <Step title="步骤1" content="（1）"></Step>
          <Step title="步骤2" content="（2）"></Step>
          <Step title="步骤3" content="（3）"></Step>
          <Step title="步骤4" content="（4）"></Step>
        </Steps>
        <ul class="steps_content">
          <li v-show="step1">步骤一内容</li>
          <li v-show="step2">步骤二内容</li>
          <li v-show="step3">步骤三内容</li>
          <li v-show="step4">步骤四内容</li>
        </ul>
        <Button v-show="disabledShow" type="primary" @click="next">{{buttonText}}</Button>
        <Button v-show="!disabledShow" type="primary" @click="next">{{buttonText}}</Button>
      </div>
      <!--单选-->
      <div class="radio">
        <RadioGroup size="large" v-model="chosenOrder" @on-change="changeModel">
          <Radio v-for="item in workOrderList" :label="item.value" :key="item.value">
            <span>{{item.label}}</span>
          </Radio>
        </RadioGroup>
      </div>
      <!--多选-->
      <div class="checkbox">
        <!--model:指定选中项目的集合，需使用.sync双向绑定，否则改变状态是不能改变使用者的数据值-->
        <checkbox-group :model.sync="checkOrder" @on-change="getCheck">
          <Checkbox v-for="check in workOrderList" :label="check.value" :value="check.label" :key="check.value">
            <span>{{check.label}}</span>
          </Checkbox>
        </checkbox-group>
      </div>
      <!--表格-->
      <div class="tabs">
        <!--columns:表格列的配置描述  data:显示的结构化数据-->
        <!--设置一个render函数：自定义渲染当前列，包括自定义组件（render函数，传入三个参数row(当前单元格数据),column(当前列数据),index(当前第几行)）-->
        <i-table @on-row-click="rowClick" @on-select-all="allChose" border :columns="columns4" :data="data1" ref="table"></i-table>
        <!--exportCsv()：可以导出数据为.csv的表格-->
        <div class="csv">
          <i-button type="primary" size="large" @click="exportData(1)"><Icon type="ios-download-outline"></Icon> 导出原始数据</i-button>
          <i-button type="primary" size="large" @click="exportData(2)"><Icon type="ios-download-outline"></Icon> 导出排序和过滤后的数据</i-button>
          <i-button type="primary" size="large" @click="exportData(3)"><Icon type="ios-download-outline"></Icon> 导出自定义数据</i-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../../Header/Header'
export default {
  name: 'childPage1',
  data () {
    return {
      current: 0,
      disabledShow: true,
      buttonText: '下一步',
      step1: true,
      step2: false,
      step3: false,
      step4: false,
      workOrderList: [
        {
          label: '选项1',
          value: 'one'
        }, {
          label: '选项2',
          value: 'two'
        }, {
          label: '选项3',
          value: 'three'
        }, {
          label: '选项4',
          value: 'four'
        }
      ],
      chosenOrder: '', // 存放选中的值
      checkOrder: [],
      self: this,
      columns4: [
        {
          type: 'selection', // 开启多选功能
          width: 60,
          align: 'center'
        },
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '年龄',
          key: 'age',
          sortable: true, // 对该列数据进行排序
          filters: [ // 进行筛选
            {
              label: '大于25岁',
              value: 1
            },
            {
              label: '小于25岁',
              value: 2
            }
          ],
          filterMultiple: false, // false则使用单选，默认为对选
          filterMethod (value, row) { // 删选函数
            if (value === 1) {
              return row.age > 25
            } else if (value === 2) {
              return row.age < 25
            }
          }
        },
        {
          title: '地址',
          key: 'address',
          ellipsis: true // 省略
        }
      ],
      data1: [
        {
          name: '王小明',
          age: 18,
          address: '北京市朝阳区芍药居'
        },
        {
          name: '张小刚',
          age: 25,
          address: '北京市海淀区西二旗'
        },
        {
          name: '李小红',
          age: 30,
          address: '上海市浦东新区世纪大道'
        },
        {
          name: '周小伟',
          age: 26,
          address: '深圳市南山区深南大道'
        }
      ]
    }
  },
  methods: {
    next () {
      this.disabledShow = true
      if (this.current === 3) {
        this.current = 3
        this.disabledShow = false
        this.buttonText = '完成'
        this.step3 = false
        this.step4 = true
      } else {
        this.current += 1
        this.buttonText = '下一步'
        if (this.current === 3) {
          this.buttonText = '提交'
        }
        if (this.current === 1) {
          this.step1 = false
          this.step2 = true
        }
        if (this.current === 2) {
          this.step2 = false
          this.step3 = true
        }
        if (this.current === 3) {
          this.step2 = false
          this.step3 = true
        }
      }
    },
    changeModel (e) {
      console.log(e + '-' + this.chosenOrder)
    },
    getCheck (data) {
      console.log(data)
    },
    // 导出tabs的数据
    exportData (type) {
      // console.log(type)
      if (type === 1) {
        this.$refs.table.exportCsv({
          filename: '原始数据'
        })
      } else if (type === 2) {
        this.$refs.table.exportCsv({
          filename: '排序和过滤后的数据',
          original: false
        })
      } else if (type === 3) {
        this.$refs.table.exportCsv({
          filename: '自定义数据',
          // filter创建一个新数组(value[当前元素的值，必选],index[当前元素的索引，可选],arr[当前元素属于的数组的事，可选])
          columns: this.columns4.filter((col, index) => index < 4), // 自定义导出的列数据
          data: this.data1.filter((data, index) => index < 4) // 自定义导出的行数据
        })
      }
    },
    // table的row（行）点击
    rowClick (e) {
      console.log(e)
    },
    // 点击全选时触发
    allChose (a) {
      console.log(a)
    }
  },
  components: {
    Header
  }
}
</script>

<style lang="scss" scoped>
.child-page1{
  width: 100%;
  padding-top: 50px;
  .container{
    width: 100%;
    .goodShow{
      position: relative;
      overflow-y: scroll;
    }
    .steps{
      padding-top: 20px;
      p{
        font-size: 15px;
        padding-bottom: 20px;
      }
      .steps_content{
        width: 100%;
        li{
          height: 20px;
        }
      }
      button{
        margin-top: 10px;
      }
    }
    .radio{
      width: 100%;
      padding-top: 10px;
    }
    .checkbox{
      padding-top: 20px;
      width: 100%;
    }
    .tabs{
      width: 100%;
      padding-top: 20px;
      .csv {
        width: 100%;
        margin-top: 20px;
      }
    }
  }
}
</style>
